<!--查看标准等级管理-->
<template>
  <div class="wrapper-container" style="width:100%">
    <el-form ref="form" class="my-form" style="margin:0">
      <el-row class="single-row">
        <el-col :span="24">
          <el-row class="item-row">
            <el-col class="name-col" :span="8"> 标准体系名称 </el-col>
            <el-col class="content-col" :span="16">
              {{ pjEvalguide.guidename }}
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="single-row">
        <el-col :span="24">
          <el-row class="item-row">
            <el-col class="name-col" :span="8"> 采用的标准等级 </el-col>
            <el-col class="content-col" :span="16">
              {{ pjEvalguide.guiderankoption }}
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="single-row">
        <el-col :span="24">
          <el-row class="item-row">
            <el-col class="name-col" :span="8"> 标准体系简介 </el-col>
            <el-col class="content-col" :span="16">
              {{ pjEvalguide.guidecomments }}
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
    <div class="table-container">
      <el-table
        :data="tableData"
        class="xpaas-table-class"
        row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class"
        header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class"
      >
        <el-table-column prop="guideitemname" label="指标名称" align="center">
        </el-table-column>
        <el-table-column prop="guideitemrank" label="级别" align="center">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>

import {pjitemBydetail,pjguideall} from "../../../api/teacher/admin";
// import {pjguideall1, pjguideall} from "@/api/teacher/admin";

export default {
  components: {},
  data() {
    return {
      id:'',
      guideid:'',
      pjEvalguide: {
        guidename:'',
        guiderankoption:'',
        guidecomments:''
      },
      tableData: [],
    };
  },
  mounted() {
    this.pjguideall()
    this.pjguideall1()
  },
  methods: {
  //查看全部标准体系
    pjguideall(){
      let id = {}
      id = this.$route.query.guideid
      console.log(id,'')
      return new Promise(() => {
        pjguideall(this.$route.query.guideid).then(res => {
          if(res.data.code == 200){
            this.pjEvalguide = res.data.data.pjEvalguide;
            this.pjEvalguide.guiderankoption = res.data.data.pjGuiderank.guiderankoption;
          }
        })
      })
    },
    pjguideall1(){
      let id = {}
      id =  this.$route.query.guideid
      console.log(id,'id')
      return new Promise(() => {
        pjitemBydetail(this.$route.query.guideid).then(res => {
          if(res.data.code == 200){
            this.tableData = res.data.data;
            if(this.tableData.length > 0){
              this.tableData[0].guideitemrank = Number(res.data.data[0].guideitemrank) + 1;
            }
          }
        })
      })
    },
  },
  computed: {},
};
</script>
<style lang="less" scoped>
@fontFamily:"Microsoft YaHei";
.xpaas-table-class {
  border: 1px solid #004ca7;
  border-radius: 9px;
  margin: 15px 0;
  > ::v-deep div.el-table__header-wrapper {
    > table.el-table__header {
      > thead {
        > tr.xpaas-header-row-class {
          padding: 0;
          height: 76px;
          background-color: #edf2f9;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          > th.xpaas-header-cell-class {
            font-weight: bold;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
  > ::v-deep div.el-table__body-wrapper {
    > table.el-table__body {
      > tbody {
        > tr.xpaas-row-class {
          > td.xpaas-header-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
          > td.xpaas-cell-class {
            height: 76px;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            > div.cell {
              font-weight: normal;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
}
.search-container {
  justify-content: flex-start !important;
}

.search-button {
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 27px;
  background: #f1f8fe;
  border: 1px solid #51aef6;
  border-radius: 6px;

  > span {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #51aef6;
  }

  > img {
    width: 19px;
    height: 19px;
    margin-right: 4px;
  }
}

.table-container {
  margin-top: 30px;

  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .wrapper-button {
    display: flex;
    flex-direction: column;
    align-items: center;

    > div {
      margin-bottom: 8px;
    }
  }
}
</style>

<style lang="less" scoped>
.item-row .el-col {
  display: flex;
  align-items: center;
  min-height: 60px;
  border-right: none !important;
}
.item-row .el-col:not(:first-child) {
  border-left: 1px solid rgba(0, 76, 167, 0.39);
}
.single-row .el-col:not(:last-child) {
  border-right: 1px solid rgba(0, 76, 167, 0.39);
}
.my-form .single-row:not(:last-child) {
  border-bottom: 1px solid rgba(0, 76, 167, 0.39);
}
.name-col {
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  color: #004ca7;
  background: rgba(77, 129, 192, 0.1);
}
.content-col {
  padding-left: 10%;
  color: #004ca7;
}
.wrapper-container {
  .my-form {
    width: 100%;
    border: 1px solid rgba(0, 76, 167, 0.8);
    margin: 57px auto 19px;
    border-radius: 9px;
  }
}
@import "../../../styles/special.less";
.bottom-block {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  .text {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 39px;
    color: #004ca7;
  }
}
.table-container5 {
  display: flex;
  .table-data:first-child {
    border-right: none !important;
    border-radius: 9px 0px 0px 9px;
  }
  .table-data:last-child {
    border-radius: 0px 9px 9px 0px;
    border-left: 1px solid #c7d7eb !important;
  }
  .table-data:not(:first-child):not(:last-child) {
    border-right: none !important;
    border-left: 0.8px solid #c7d7eb !important;
    border-radius: 0px !important;
  }
}
.table-container ::v-deep .el-table--border .el-table__cell:first-child .cell {
  padding-left: 10px !important;
}
.filter-button1::v-deep .el-radio-button .el-radio-button__inner {
  border-radius: 6px !important;
  border: 1px solid rgb(245, 134, 106);
  color: rgb(245, 134, 106);
  background-color: rgb(254, 237, 226);
}
.filter-button1::v-deep
  .el-radio-button__orig-radio:checked
  + .el-radio-button__inner {
  border: 1px solid rgb(245, 134, 106);
  color: white;
  background-color: rgb(245, 134, 106);
}
.filter-button {
  display: flex;
  margin-top: 27px;
}
.wrapper-container {
  width: 1711px;
  margin: 0 auto;
}

.table-container {
  margin-top: 30px;
  display: flex;

  .table-data {
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
    min-height: 500px;
  }
}

.save-button {
  width: 87px;
  height: 36px;
  line-height: 36px;
  background: #fff6ef;
  border: 1px solid #f3b815;
  border-radius: 6px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #f3b815;
  text-align: center;
  margin: 82px auto;
}

.zuoyou {
  width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>
